import React, { Component } from 'react';
import {
  View,
  Text,
  Image,
  Animated,
  TouchableOpacity,
  StyleSheet,
} from 'react-native';

import PxToDp from '../../../utils/PxToDp';
import ModalExt from '../../Public/ModalExt';
import AddItem from './AddItem';

class CommunicationHeader extends Component {
  constructor(props) {
    super(props);

    this.state = {
      rotateValue: new Animated.Value('0deg'),
      addVisible: false,
    };
  }

  _rotation(deg) {
    this.setState({ rotateValue: deg });
  }

  _addVisible(visible) {
    this.setState({ addVisible: visible });
  }

  render() {
    const { navigator, user, dispatch, carInfo } = this.props;
    return (
      <View style={[styles.row, styles.header]}>
        <TouchableOpacity
          activeOpacity={0.6}
          style={[styles.row, styles.back]}
        >
          <TouchableOpacity
            style={[styles.row, styles.backStyle]}
            onPress={() => this.props.onPress()}
          >
            <Image
              source={require('../../../img/go_back.png')}
              style={[styles.backIcon]}
            />
            <Text style={[styles.name]}>结束沟通</Text>
          </TouchableOpacity>
        </TouchableOpacity>


        <TouchableOpacity
          style={[styles.switchBtn]}
          onPress={() => {
            this._rotation('135deg');
            this._addVisible(true);
          }
          }
        >
          <Animated.Image
            source={require('../../../img/add.png')}
            style={styles.addView}
          />
        </TouchableOpacity>
        <ModalExt
          onRequestClose={() => this._addVisible(false)}
          animationType={'fade'}
          transparent
          visible={this.state.addVisible}
          onPress={() => this._addVisible(false)}
        >
          <AddItem
            navigator={navigator}
            user={user}
            carInfo={carInfo}
            dispatch={dispatch}
            onPress={() => this._addVisible(false)}
          />
        </ModalExt>
      </View>
    );
  }

  componentDidMount() {
    Animated.timing(  // 支持: spring, decay, timing，过渡的动画方式
     this.state.rotateValue,
      {
        duration: 2000,
        toValue: this.state.rotateValue,  // 目标值

      },
    ).start();  // 开始
  }
}

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
  },
  header: {
    justifyContent: 'space-between',
    alignItems: 'center',
    width: '100%',
    height: PxToDp(44),
    paddingLeft: PxToDp(16),
    backgroundColor: '#fff',
  },
  back: {
    flex: 1,
    alignItems: 'center',
  },
  backStyle: {
    alignItems: 'center',
  },
  backIcon: {
    width: PxToDp(14),
    height: PxToDp(22),
  },
  name: {
    marginLeft: PxToDp(6),
    color: '#333',
    fontSize: PxToDp(16),
  },
  switchBtn: {
    width: PxToDp(60),
    height: PxToDp(44),
    backgroundColor: '#fff',
    justifyContent: 'center',
    alignItems: 'flex-end',
    paddingRight: PxToDp(20),
  },
  addView: {
    width: PxToDp(26),
    height: PxToDp(26),
  },
});

export default CommunicationHeader;
